<template>
  <widget-root :styles="styles" v-if="content.data.length">
    <router-link to="/bundle/pages/store_notice/store_notice">
      <view
        class="notice"
        :style="{
          'background-color': styles.bg_color,
          'border-radius': `${$px2rpx(styles.border_radius)}rpx`,
        }"
      >
        <view class="flex">
          <image
            class="flex-none"
            style="height: 34rpx; width: auto"
            :src="
              content.icon_type == 1
                ? require('@/static/images/notice_icon.png')
                : $getImageUri(content.icon)
            "
            mode="heightFix"
          ></image>
          <view
            class="left-line"
            :style="{ 'background-color': styles.line_color }"
          ></view>
          <view class="flex-1">
            <swiper
              autoplay="true"
              style="height: 76rpx; flex: 1"
              vertical="true"
              circular="true"
              :interval="3000"
            >
              <swiper-item
                v-for="(item, index) in content.data"
                :key="index"
                class="flex"
              >
                <view class="flex-none">
                  <u-tag
                    v-if="content.show_tag && index == 0"
                    shape="circle"
                    text="最新"
                    size="mini"
                    :color="themeColor"
                    :border-color="themeColor"
                    mode="plain"
                  />
                </view>
                <view
                  class="text-swiper m-l-10 line-1"
                  :style="{ color: styles.color }"
                  >{{ item.name }}
                </view>
              </swiper-item>
            </swiper>
          </view>
          <u-icon name="arrow-right" size="28"></u-icon>
        </view>
        <view class="shade"></view>
      </view>
    </router-link>
  </widget-root>
</template>

<script type="text/javascript">
export default {
  props: {
    content: {
      type: [Object, Array],
    },
    styles: {
      type: [Object, Array],
    },
  },
  data() {
    return {};
  },
  methods: {},
  computed: {},
};
</script>

<style lang="scss" scoped>
.notice {
  padding: 0 20rpx;
  position: relative;

  .left-line {
    height: 28rpx;
    width: 1px;
    background-color: #e5e5e5;
    margin: 0 20rpx;
  }

  .shade {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }

  .new-tag {
    color: #ff2c3c;
    padding: 0 10rpx;
    margin-right: 10rpx;
    font-size: 22rpx;
    border-radius: 14rpx;
    background: transparent;
    border: 1px solid #ff2c3c;
  }
}
</style>
